<!--
 * @Description: 组件
 * @Author: zzj
 * @Date: 2021-10-10 19:10:02
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-10 19:23:18
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<style>
		.box{
			border:1px solid #ccc;
			margin: 1em;
			padding: 1em;
		}
	</style>
</head>
<body>
	<div id="app">
		<box_container title="政务">
			<div>政务图表</div>
		</box_container>
		<box_container title="交通"></box_container>
		<box_container title="旅游">
			<div>旅游图表</div>
		</box_container>
	</div>
	<script>
		let boxContainer = {
			template:`
				<div class="box"> 
					<div class="hesder">
						<div class="title">
							{{title}}
						</div>
						<div class="right">tab</div>	
					</div>
					<div class="container">
						<slot></slot>
					</div>	
				</div>
			`,
			data(){
				return{

				}
			},
			//接收调用的参数
			props:{
				title:{
					type:String,
					required:true
				}
			}
		}

		new Vue({
			el:"#app",
			components:{
				"box_container":boxContainer,
			}
		})
	</script>
</body>
</html>